<template>
  <div>
    <div class="unitWrapper">
      <div class="unitTop">
        <div class="unitTitleContainer">
          <div class="unitFlag"></div>
          <div class="unitTitle">职业性格分析</div>
        </div>
        <div class="saveBtns" v-if="!isSuperToken && false">
          <div class="contentItemEditAndAIBtn AIBtn" @click="aiCreate()">
            <img src="@/assets/detail/AI_white.png" />
            {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
          </div>
          <div class="contentItemEditAndAIBtn" @click="handleEditClick">
            <img src="@/assets/detail/edit_white.png" />
            {{ currentEdit ? "退出编辑" : "编辑" }}
          </div>
          <div
            class="contentItemEditAndAIBtn saveEditBtn"
            @click="save()"
            v-if="isAdmin == true && currentEdit && !editAll"
          >
            <!-- <img src="@/assets/detail/save.png" /> -->
            保存
          </div>
        </div>
      </div>
      <div
        :class="{
          unitContent: true,
        }"
      >
        <div class="personality-pic">
          <div class="left-personality">
            <div class="background">
              <div class="content">
                <div class="top">职业性格</div>
                <div class="bottom">专业线</div>
              </div>
              <div class="portrait">
                <img :src="portrait" alt="" />
              </div>
              <div class="other-personality-box">
                <div
                  class="box-item"
                  @click="changeCurrentPersonality(item, index)"
                  v-for="(item, index) in personalityList"
                  :key="index"
                  :class="{ 'center-item': index === 1 }"
                >
                  {{ item }}人格
                </div>
              </div>
            </div>
            <div class="arrow"></div>
          </div>
          <div class="nine-desc">
            <div class="nine-title-box">
              <div
                class="nine-title"
                v-for="(item, index) in personalityTitles"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
            <div class="right-nine">
              <div
                class="right-item"
                v-for="(item, index) in ninePersonality"
                :key="index"
              >
                <img :src="item.url" alt="" />
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
        <div class="personality-desc">
          <div
            class="desc_item"
            :class="getBgClass(index, 'bg')"
            v-for="(item, index) in descList"
            :key="index"
          >
            <div class="title">
              {{ personalityList[1] }}人格{{ item.title }}
            </div>
            <div class="tag-box">
              <div
                class="tag-item"
                :class="getBgClass(index, 'tag')"
                v-for="(_item, _index) in item.keywords"
                :key="_index"
              >
                {{ _item }}
              </div>
            </div>
            <div class="desc" ref="descText">
              <div class="desc-content">{{ item.desc }}</div>
            </div>
            <el-popover
              placement="top"
              width="200"
              trigger="click"
              v-if="textOverflowStatus[index]"
            >
              <div class="popover-content">{{ item.desc }}</div>
              <span
                v-if="textOverflowStatus[index]"
                slot="reference"
                class="expand-btn"
                :class="getBgClass(index, 'bg')"
                ><span>...</span>展开</span
              >
            </el-popover>
            <!-- <el-tooltip
              :content="item.desc"
              placement="top-start"
              popper-class="desc-tooltip"
            >
              <div class="desc">{{ item.desc }}</div>
            </el-tooltip> -->
          </div>
        </div>
      </div>
      <websocket ref="child1" @initMessageBack="initMessageBackForFirst" />
      <websocket ref="child2" @initMessageBack="initMessageBackForSecond" />
    </div>
  </div>
</template>

<script>
import Websocket from "@/components/Websocket";
export default {
  name: "jobPersonality",
  components: {
    Websocket,
  },
  props: {
    isSuperToken: {
      type: Boolean,
      default: false,
    },
    workEnviromentIndex: {
      type: Number || String,
      default: 1,
    },
    jobPersonalityData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      textOverflowStatus: [],
      descList: [
        {
          title: "适合的工作环境",
          keywords: ["tag1", "tag2"],
          desc: "在稳定有序、注重细节且职责明确的工作环境在稳定有序、注重细节且职责明确的工作环境在稳定有序、注重细节132稳定有序、注重细节且职责明确的工作环境",
          showExpand: false,
        },
        {
          title: "的工作潜能",
          keywords: ["tag1", "tag2"],
          desc: "在稳定有序、注重细节且职责明确的工作环境",
          showExpand: false,
        },
        {
          title: "的职业价值观",
          keywords: ["tag1", "tag2"],
          desc: "在稳定有序、注重细节且职责明确的工作环境",
          showExpand: false,
        },
      ],
      personalityTitles: ["基本特征", "优势", "劣势"],
      ninePersonality: [
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
        {
          url: "https://img3.job1001.com/data_center/images/position_item_icon.png",
          label: "严谨",
        },
      ],
      personalityList: ["什么性格", "主人公型人格", "什么什么性格"],
      portrait: "",
    };
  },
  methods: {
    getBgClass(index, type) {
      if (type == "bg") {
        switch (index) {
          case 0:
            return "bg-color-0";
          case 1:
            return "bg-color-1";
          case 2:
            return "bg-color-2";
          default:
            return "";
        }
      } else {
        switch (index) {
          case 0:
            return "tag-color-0";
          case 1:
            return "tag-color-1";
          case 2:
            return "tag-color-2";
          default:
            return "";
        }
      }
    },
    initMessageBackForFirst() {
      console.log("aaaa");
    },
    initMessageBackForSecond() {
      console.log("bbbb");
    },
    changeCurrentPersonality(item, index) {
      this.$nextTick(() => {
        if (index == 1) {
          return;
        } else {
          let tempPersonality = this.personalityList[1];
          this.$set(this.personalityList, 1, item);
          this.$set(this.personalityList, index, tempPersonality);
        }
        this.jobPersonalityData.data.forEach((ele) => {
          if (item == ele.description) {
            let jsonData = JSON.parse(ele.layerValue);
            this.ninePersonality = jsonData.personalityTraits
              .concat(jsonData.personalityAdvantages)
              .concat(jsonData.personalityDisadvantages);
            this.portrait = jsonData.pic;
            this.descList.forEach((descList_item, index) => {
              switch (index) {
                case 0:
                  descList_item.keywords = jsonData.environment.keywords;
                  descList_item.desc = jsonData.environment.desc;
                  break;
                case 1:
                  descList_item.keywords = jsonData.potential.keywords;
                  descList_item.desc = jsonData.potential.desc;
                  break;
                case 2:
                  descList_item.keywords = jsonData.worth.keywords;
                  descList_item.desc = jsonData.worth.desc;
                  break;
                default:
                  break;
              }
            });
          }
        });
      });
    },
    isTextOverflow(index) {
      const descElement = this.$refs.descText?.[index];
      if (!descElement) return false;

      const content = descElement.querySelector(".desc-content");
      if (!content) return false;

      // 详细打印内容信息
      console.log(`Description ${index + 1}:`, {
        text: content.innerText,
        textLength: content.innerText.length,
        scrollHeight: content.scrollHeight,
        offsetHeight: content.offsetHeight,
        clientHeight: content.clientHeight,
        style: {
          maxHeight: getComputedStyle(content).maxHeight,
          lineHeight: getComputedStyle(content).lineHeight,
          webkitLineClamp: getComputedStyle(content).webkitLineClamp,
        },
      });

      // 检查是否有省略号（表示文本被截断）
      const isEllipsisActive =
        content.offsetWidth < content.scrollWidth ||
        content.offsetHeight < content.scrollHeight;

      // 检查行数是否超过4行
      const lineHeight = parseInt(getComputedStyle(content).lineHeight);
      const maxLines = 4;
      const currentLines = Math.floor(content.scrollHeight / lineHeight);

      console.log(`Description ${index + 1} lines:`, {
        lineHeight,
        currentLines,
        isEllipsisActive,
      });

      return isEllipsisActive || currentLines > maxLines;
    },
    checkAllTextOverflow() {
      console.log("Checking text overflow status...");
      this.descList.forEach((item, index) => {
        console.log("aaaaaaaaaaaaaaaaaaaaaa", index);
        const isOverflow = this.isTextOverflow(index);
        this.$set(this.textOverflowStatus, index, isOverflow);
        console.log(`Description ${index + 1} overflow status:`, isOverflow);
      });
    },
  },
  mounted() {
    console.log("jobPersonalityData", this.jobPersonalityData);
    this.personalityList = [];
    this.ninePersonality = [];
    this.jobPersonalityData.data.forEach((item) => {
      this.personalityList.push(item.description);
    });
    let jsonData = JSON.parse(this.jobPersonalityData.data[1].layerValue);
    this.ninePersonality = jsonData.personalityTraits
      .concat(jsonData.personalityAdvantages)
      .concat(jsonData.personalityDisadvantages);
    // .concat(jsonData.personalityAdvantages);
    this.portrait = jsonData.pic;
    this.descList.forEach((item, index) => {
      switch (index) {
        case 0:
          item.keywords = jsonData.environment.keywords;
          item.desc = jsonData.environment.desc;
          break;
        case 1:
          item.keywords = jsonData.potential.keywords;
          item.desc = jsonData.potential.desc;
          break;
        case 2:
          item.keywords = jsonData.worth.keywords;
          item.desc = jsonData.worth.desc;
          break;
        default:
          break;
      }
    });

    // 添加一个延时检查，确保内容完全渲染
    this.$nextTick(() => {
      setTimeout(() => {
        console.log("Delayed check starting...");
        this.checkAllTextOverflow();
      }, 100);
    });
  },
};
</script>

<style lang="scss" scoped>
.unitWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 56px;
  // height: 100px;
  .unitTop {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(260deg, #48a8ff 0%, #1470fa 100%);
    border-radius: 8px 8px 0px 0px;
    opacity: 0.87;
    padding: 10px 18px;
    .unitTitleContainer {
      display: flex;
      align-items: center;
      .unitFlag {
        width: 5px;
        height: 15px;
        background: #ffffff;
        border-radius: 3px;
        margin-right: 8px;
      }
      .unitTitle {
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        letter-spacing: 0.3px;
        color: #ffffff;
        line-height: 25px;
      }
    }

    .saveBtns {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
      .contentItemEditAndAIBtn {
        line-height: 32px;
        margin: 0 10px 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .saveEditBtn {
        width: 57px;
        height: 26px;
        color: #3674ff;
        background-color: #fff;
        border-radius: 4px;
        justify-content: center;
      }
    }
  }
  .unitContent {
    height: 552px;
    background: #ffffff;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #d7e4ff;
    padding: 14px;
    box-sizing: border-box;
    .personality-pic {
      width: 100%;
      height: 259px;
      // margin: 11px 80px 10px 116px;
      margin-top: 11px;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      .left-personality {
        display: flex;
        flex-direction: row;
        align-items: center;

        width: 412px;
        // width: 41.2%;
        height: 259px;
        .background {
          width: 264px;
          height: 200px;
          background-image: url("../../../../../assets/developPath/background.png");
          background-size: 100% 100%;
          margin-right: 81px;
          display: flex;
          align-items: center;
          position: relative;
          .content {
            width: 72px;
            height: 47px;
            margin-left: 38px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 5px;
            .top {
              font-weight: 500;
              font-size: 18px;
              line-height: 25px;
              font-family: PingFangSC, PingFang SC;
            }
            .bottom {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 13px;
              line-height: 18px;
            }
          }
          .portrait {
            width: 49px;
            height: 49px;
            background-image: url("../../../../../assets/developPath/circleBackground.png");
            background-size: 100% 100%;
            margin-left: 6px;
            img {
              width: auto; // 移除固定宽度
              height: auto; // 移除固定高度
              max-width: 100%; // 限制最大宽度
              max-height: 100%; // 限制最大高度
              object-fit: contain; // 保持原始比例
            }
          }
          .other-personality-box {
            width: 170px;
            height: 116px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            margin-left: 165px;
            .box-item {
              width: fit-content;
              min-width: 80px;
              padding: 0 15px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              background: #d6f2fb;
              border-radius: 100px;
              border: 1px solid #ffffff;
              color: #258098;
              cursor: pointer;
            }
            .center-item {
              width: 160px;
              margin-left: 14px;
              background: #3f6ff0;
              box-shadow: 0px 2px 8px 0px rgba(159, 215, 255, 0.8);
              border-radius: 100px;
              border: 1px solid #ffffff;
              font-weight: 400;
              font-size: 15px;
              color: #ffffff;
              cursor: pointer;
            }
          }
        }
        .arrow {
          width: 75px;
          height: 147px;
          background-image: url("../../../../../assets/developPath/arrow.png");
          background-size: 100% 100%;
        }
      }
      .nine-desc {
        width: 337px;
        // width: 33.7%;
        height: 259px;
        display: flex;
        flex-direction: row;
        .nine-title-box {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          margin-left: 20px;
          height: 100%;
          width: 44px;
          .nine-title {
            width: 44px;
            height: 42px;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 15px;
            color: #555555;
            line-height: 21px;
            text-align: right;
            font-style: normal;
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直排列子元素 */
            justify-content: center; /* 垂直居中 */
            align-items: flex-end; /* 水平靠右对齐 */
            writing-mode: horizontal-tb; /* 默认水平排列文本 */
          }
        }
        .right-nine {
          width: 240px;
          margin-left: 33px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          .right-item {
            width: 78px;
            height: 75px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #83a4d5;
            img {
              width: 46px;
              height: 46px;
              margin-bottom: 9px;
            }
          }
        }
      }
    }
    .personality-desc {
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
      width: 100%;
      .desc_item {
        padding: 16px;
        box-sizing: border-box;
        // width: 314px;
        width: 33%;
        height: 230px;
        border: 1px solid #d2ebff;
        margin: 2px;
        position: relative;
        .title {
          width: 100%;
          height: 22px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 15px;
          color: #222222;
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
        .tag-box {
          display: flex;
          flex-direction: row;
          margin-top: 18px;
          .tag-item {
            width: 92px;
            height: 32px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 4px;
            font-size: 14px;
            color: #333333;
          }
        }
        .desc {
          margin-top: 22px;
          width: 100%;

          .desc-content {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            max-height: 96px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            white-space: normal;
            // 添加过渡效果以便观察
            transition: max-height 0.3s ease;
          }
        }
        .expand-btn {
          z-index: 999;
          position: absolute;
          bottom: 26px;
          right: 16px;
          padding: 0 4px;
          cursor: pointer;
          color: #3674ff;
          span {
            color: #555555;
          }
        }
      }
    }
  }

  ::v-deep .el-input__inner {
    height: 32px;
    background: #eeeeee;
    border-radius: 2px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    line-height: 24px;
    outline: none;
  }
  .bg-color-0 {
    background-color: #f6faff;
  }

  .bg-color-1 {
    background-color: #f8f7ff;
  }

  .bg-color-2 {
    background-color: #f7fff8;
  }
  .tag-color-0 {
    background-color: #e2eeff;
  }

  .tag-color-1 {
    background-color: #efedf9;
  }

  .tag-color-2 {
    background-color: #ddfae1;
  }
}
</style>
<style lang="scss">
// 添加到已有的 style 标签内，注意要去掉 scoped
.desc-tooltip {
  max-width: 400px;
  line-height: 1.5;
  padding: 12px;
  font-size: 14px;
  word-break: break-word;

  // 修改为白底黑字样式
  background-color: #fff !important;
  color: #555555 !important;
  border: 1px solid #e4e7ed !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  // 修改小箭头的样式
  .el-popper[x-placement^="top"] .popper__arrow,
  .el-popper[x-placement^="top"] .popper__arrow::after {
    border-top-color: #fff !important;
  }
}

.desc-popover {
  max-width: 400px;
  line-height: 1.5;
  padding: 12px;
  font-size: 14px;
  word-break: break-word;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .popover-content {
    max-height: 300px;
    overflow-y: auto;
    line-height: 24px;
    color: #555555;
  }

  &[x-placement^="top"] .popper__arrow {
    border-top-color: #e4e7ed;
    &::after {
      border-top-color: #fff;
    }
  }
}
</style>
